<template>
  <h2>Class与Style绑定</h2>
  <h3>绑定HTML class</h3>
  <div class="note">
    <p>1. 以字面量的形式绑定一个对象</p>
    <p>2. 直接绑定一个对象</p>
    <p>3. 绑定一个返回对象的计算属性</p>
    <p>4. 绑定一个数组</p>
  </div>

  <div class="test">
    <hr class="hr-style"/>
    <button @click="isActive =!isActive">Toggle Active</button>

    <hr class="hr-style"/>
    <h4>1. 以字面量的形式绑定一个对象</h4>
    <div >
      <!-- 渲染的结果是：<div class="active"></div> -->
      <div :class="{active: isActive, 'text-danger':hasError}">属性值为false的不选中</div>
      <!-- 渲染的结果是：<div class="static active"></div> -->
      <div
      class="static"
      :class="{active: isActive, 'text-danger':hasError}">:class 指令也可以和一般的 class attribute 共存</div>
    </div>

    <hr class="hr-style"/>
    <h4>2. 直接绑定一个对象</h4>
    <div>
      <!-- 渲染的结果是：<div class="active"></div> -->
      <div :class="classObject">直接绑定一个对象</div>
    </div>

    <hr class="hr-style"/>
    <h4>3. 绑定一个返回对象的计算属性</h4>
    <div>
      <div :class="classObject2">绑定一个返回对象的计算属性</div>
    </div>

    <hr class="hr-style"/>
    <h4>4. 绑定一个数组</h4>
    <div>
      <div :class="[activeClass, errorClass]">绑定一个数组来渲染多个CSS class</div>
      <div :class="[isActive ? activeClass : '', errorClass]">使用三元表达式有条件地渲染某个 class</div>
      <div :class="[{ [activeClass]: isActive }, errorClass]">有多个依赖条件的 class 时,可以在数组中嵌套对象</div>
    </div>
  </div>

  <h3 style="margin-top: 50px;">绑定HTML style</h3>
  <div class="note">
    <p>1. 绑定对象</p>
    <p>2. 绑定数组</p>
    <p>3. 样式多值</p>
  </div>

  <div class="test">
    <hr class="hr-style"/>
    <h4>1. 绑定对象</h4>
    <div>
      <div :style="{ color: activeColor, fontSize: fontSize + 'px' }">:style 支持绑定 JavaScript 对象值，对应的是 HTML 元素的 style 属性</div>
      <div :style="{ 'font-size': fontSize + 'px' }">:style 也支持 kebab-cased 形式的 CSS 属性 key, 如'font-size'</div>
      <div :style="styleObject">也可以直接绑定一个样式对象,使模板更加简洁</div>
    </div>

    <hr class="hr-style"/>
    <h4>2. 绑定数组</h4>
    <!-- <div :style="[baseStyles, overridingStyles]"></div> -->

    <hr class="hr-style">
    <h4>3. 样式多值</h4>
    <div>
      <!-- <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div> -->
       <p>数组仅会渲染浏览器支持的最后一个值。在这个示例中，在支持不需要特别前缀的浏览器中都会渲染为 display: flex</p>
    </div>
  </div>



</template>

<script lang='ts'>
export default {
  name:'Study3StuDemo1'
}
</script>

<script setup lang='ts'>
import {ref,reactive,computed} from 'vue'

// 绑定class
const isActive = ref(true)
const hasError = ref(false)
const error = ref(null)

const classObject = reactive({
  active: true,
  'text-danger': false
})

const classObject2 = computed(()=>({
  active: isActive.value,
  'text-danger': error.value //&& error.value.type  === 'fatal'
}))

const activeClass = ref('active')
const errorClass = ref('text-danger')

// 绑定style
const activeColor = ref('red')
const fontSize = ref(15)

const styleObject = reactive({
  color: 'red',
  fontSize: '15px'
})
</script>

<style scoped>
body {
  padding: 20px;
}
h2 {
  color: red;
}
h3 {
  color: rgb(220, 85, 85);
}
.hr-style {
  border: 3px solid gold;
  margin: 20px 0;
}
.note {
  margin: 10px;
  padding: 10px;
  border: 3px solid rgb(221, 121, 202);
}
.note p {
  color: rgb(226, 106, 204);
  font-weight: bold;
}
.active {
  background-color: rgb(184, 223, 180);
}
</style>
